<template>
  <div>
    <div>
      <h4>Barthel指数评估量表(交大一附院)</h4>
      <el-row type="flex" justify="space-between">
        <el-col :span="5">
          <div>
            <el-button type="primary" @click="openDialog">Barthel指数评估量表(交大一附院)</el-button>
          </div>
        </el-col>
        <el-col :span="3">
          <div>
            <el-input v-model="pgForm.barthel1_input1" placeholder="" readonly style="width: 70%;"></el-input>
            <span> 分</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <el-input v-model="pgForm.barthel1_input2" readonly></el-input>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog
      title="Barthel指数评估量表(交大一附院)"
      :visible.sync="barthel1_dialogVisible"
      width="50%">
      <div class="one">
        <div class="eat">
          1、进食
        </div>
        <div class="list1">
          <el-radio-group v-model.number="pgForm.barthel1_radio1" class="el-radio-group">
            <el-radio label="'10分 使用必要的装置，在适当的时间内独立地进食。'" class="el-radio1">10分 使用必要的装置，在适当的时间内独立地进食。</el-radio>
            <br>
            <el-radio label="'5分 需要帮助（如切割食物、搅拌食物）。'" class="el-radio1">5分 需要帮助（如切割食物、搅拌食物）。</el-radio>
            <br>
            <el-radio label="'0分 无法完成。'" class="el-radio1">0分 无法完成。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="two">
        <div class="transfer">
          2、洗澡
        </div>
        <div class="list2">
          <el-radio-group v-model.number="pgForm.barthel1_radio2" class="el-radio-group">
            <el-radio label="'5分 可独立完成。'" class="el-radio1">5分 可独立完成。</el-radio>
            <br>
            <el-radio label="'0分 无法完成。'" class="el-radio1">0分 无法完成。</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="three">
        <div class="decoration">
          3、修饰
        </div>
        <div class="list3">
          <el-radio-group v-model.number="pgForm.barthel1_radio3" class="el-radio-group">
            <el-radio label="'5分 独立地完成洗脸、梳头、刷牙及刮脸。'" class="el-radio1">5分 独立地完成洗脸、梳头、刷牙及刮脸。</el-radio>
            <br>
            <el-radio label="'0分 无法完成。'" class="el-radio1">0分 无法完成。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="four">
        <div class="wc">
          4、穿衣
        </div>
        <div class="list4">
          <el-radio-group v-model.number="pgForm.barthel1_radio4" class="el-radio-group">
            <el-radio label="'10分 独立地系鞋带、扣纽扣、穿脱支具。'" class="el-radio1">10分 独立地系鞋带、扣纽扣、穿脱支具。</el-radio>
            <br>
            <el-radio label="'5分 需要帮助，但在适当的时间内至少做完一半地工作。'" class="el-radio1">5分 需要帮助，但在适当的时间内至少做完一半地工作。</el-radio>
            <br>
            <el-radio label="'0分 无法完成。'" class="el-radio1">0分 无法完成。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="five">
        <div class="take-shower">
          5、控制大便
        </div>
        <div class="list5">
          <el-radio-group v-model.number="pgForm.barthel1_radio5" class="el-radio-group">
            <el-radio label="'10分 不失禁，如果需要，能够使用灌肠剂或栓剂。'" class="el-radio1">10分 不失禁，如果需要，能够使用灌肠剂或栓剂。</el-radio>
            <br>
            <el-radio label="'5分 偶尔失禁或需要器具帮助。'" class="el-radio1">5分 偶尔失禁或需要器具帮助。</el-radio>
            <br>
            <el-radio label="'0分 无法完成。'" class="el-radio1">0分 无法完成。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="six">
        <div class="walk">
          6、控制小便
        </div>
        <div class="list6">
          <el-radio-group v-model.number="pgForm.barthel1_radio6" class="el-radio-group">
            <el-radio label="'10分 不失禁，如果需要，能使用集尿器。'" class="el-radio1">10分 不失禁，如果需要，能使用集尿器。</el-radio>
            <br>
            <el-radio label="'5分 偶尔失禁或需要器具帮助。'" class="el-radio1">5分 偶尔失禁或需要器具帮助。</el-radio>
            <br>
            <el-radio label="'0分 无法完成。'" class="el-radio1">0分 无法完成。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="seven">
        <div class="stairs">
          7、用厕
        </div>
        <div class="list7">
          <el-radio-group v-model.number="pgForm.barthel1_radio7" class="el-radio-group">
            <el-radio label="'10分 独立用厕所或便盆，穿脱衣裤，擦净、冲洗或清洗便盆）。'" class="el-radio1">10分 独立用厕所或便盆，穿脱衣裤，擦净、冲洗或清洗便盆）。</el-radio>
            <br>
            <el-radio label="'5分 在穿脱衣裤或使用卫生纸时需要帮助。'" class="el-radio1">5分 在穿脱衣裤或使用卫生纸时需要帮助。</el-radio>
            <br>
            <el-radio label="'0分 无法完成。'" class="el-radio1">0分 无法完成。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="eight">
        <div class="clothes">
          8、床椅转移
        </div>
        <div class="list8">
          <el-radio-group v-model.number="pgForm.barthel1_radio8" class="el-radio-group">
            <el-radio label="'15分 独立地从轮椅到床，再从床回到轮椅。'" class="el-radio1">15分 独立地从轮椅到床，再从床回到轮椅。</el-radio>
            <br>
            <el-radio label="'10分 较小的帮助和监督。'" class="el-radio1">10分 较小的帮助和监督。</el-radio>
            <br>
            <el-radio label="'5分 能坐，但需要极大的帮助。'" class="el-radio1">5分 能坐，但需要极大的帮助。</el-radio>
            <br>
            <el-radio label="'0分 无法完成。'" class="el-radio1">0分 无法完成。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="nine">
        <div class="shit">
          9、平地行走
        </div>
        <div class="list9">
          <el-radio-group v-model.number="pgForm.barthel1_radio9" class="el-radio-group">
            <el-radio label="'15分 能在水平路面行走45m，可以用辅助装置但不包括带轮的助行器。'" class="el-radio1">15分 能在水平路面行走45m，可以用辅助装置但不包括带轮的助行器。</el-radio>
            <br>
            <el-radio label="'10分 在帮助下行走45m。'" class="el-radio1">10分 在帮助下行走45m。</el-radio>
            <br>
            <el-radio label="'5分 如果不能行走，能使用轮椅行走45m。'" class="el-radio1">5分 如果不能行走，能使用轮椅行走45m。</el-radio>
            <br>
            <el-radio label="'0分 无法完成。'" class="el-radio1">0分 无法完成。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="ten">
        <div class="urine">
          10、上下楼梯
        </div>
        <div class="list10">
          <el-radio-group v-model.number="pgForm.barthel1_radio10" class="el-radio-group">
            <el-radio label="'10分 独立，可以用辅助装置。'" class="el-radio1">10分 独立，可以用辅助装置。</el-radio>
            <br>
            <el-radio label="'5分 需要帮助和监督。'" class="el-radio1">5分 需要帮助和监督。</el-radio>
            <br>
            <el-radio label="'0分 无法完成。'" class="el-radio1">0分 无法完成。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>

      <div class="lastDiv">
        <span>总分 </span>
        <el-input v-model="pgForm.barthel1_input1" readonly style="width: 10%;margin-right: 100px"></el-input>
        <el-dropdown class="word" trigger="click" @command="handleCommand" v-if="$route.path == '/patient/assess/detail/'">
          <el-button type="primary">
            输出文档<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="pdf">PDF</el-dropdown-item>
            <el-dropdown-item command="docx">Word</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {sendJumpPdfData, sendJumpWordData} from "@/api/gaoxin/word";

export default {
  name: "barthel1",
  title: "Barthel评估量(交大一附院)",
  created() {
    if(this.istrans){
      this.pgForm=this.fromdata
    }
  },
  props: {
    fromdata:{},
    istrans:false,
  },
  data() {
    return {
      barthel1_dialogVisible: false,
      pgForm: {
        barthel1_radio1: '',
        barthel1_radio2: '',
        barthel1_radio3: '',
        barthel1_radio4: '',
        barthel1_radio5: '',
        barthel1_radio6: '',
        barthel1_radio7: '',
        barthel1_radio8: '',
        barthel1_radio9: '',
        barthel1_radio10: '',
        barthel1_input1: 0,
        barthel1_input2: '',
        barthel1_input7: '',
      }
    }
  },
  computed:{
    barthel1_sum(){
      return (this.pgForm.barthel1_radio1.split('分')[0].slice(1))*1+(this.pgForm.barthel1_radio2.split('分')[0].slice(1))*1+(this.pgForm.barthel1_radio3.split('分')[0].slice(1))*1+(this.pgForm.barthel1_radio4.split('分')[0].slice(1))*1+(this.pgForm.barthel1_radio5.split('分')[0].slice(1))*1+(this.pgForm.barthel1_radio6.split('分')[0].slice(1))*1+(this.pgForm.barthel1_radio7.split('分')[0].slice(1))*1+(this.pgForm.barthel1_radio8.split('分')[0].slice(1))*1+(this.pgForm.barthel1_radio9.split('分')[0].slice(1))*1+(this.pgForm.barthel1_radio10.split('分')[0].slice(1))*1
    },
    taskId() {
      return this.$route.query.taskId;
    }
  },
  watch: {
    barthel1_sum(val){
      if (this.$route.path != "/patient/assess/detail/") {
        this.pgForm.barthel1_input1 = val
        if (this.pgForm.barthel1_input1 >= 0 & this.pgForm.barthel1_input1 <= 40) {
          this.pgForm.barthel1_input2 = '评定结果：重度功能障碍，大部分日常生活活动不能完成或需他人服侍。'
        }
        else if (this.pgForm.barthel1_input1 >= 41 & this.pgForm.barthel1_input1 <= 60) {
          this.pgForm.barthel1_input2 = '评定结果：中度功能障碍，需要极大的帮助方能完成日常生活活动。'
        }
        else if (this.pgForm.barthel1_input1 > 60 & this.pgForm.barthel1_input1 < 100) {
          this.pgForm.barthel1_input2 = '评定结果：轻度功能障碍，能独立完成部分日常生活活动，需要部分帮助。'
        }
        else if (this.pgForm.barthel1_input1 === 100) {
          this.pgForm.barthel1_input2 = '评定结果：无障碍。'
        }
        else {

        }
      }
    },
  },
  methods: {
    openDialog() {
      this.barthel1_dialogVisible = true;
    },

    handleCommand(command) {
      this.sendData(command);
    },
    sendData(type) {
      const loading = this.$loading({
        lock: true,
        text: '努力输出中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      if (type == 'docx') {
        sendJumpWordData({ taskId: this.taskId, jumpTableName: this.$options.name + "Jump" }).then(response => {
          if(response) {
            loading.close();
            this.$message.success("word文档输出成功！")
          };
          const data = response;
          let url = window.URL.createObjectURL(data);   // 将二进制文件转化为可访问的url
          var a = document.createElement('a');
          document.body.appendChild(a);
          a.href = url;
          a.download = this.$options.title + '.docx';
          a.click();   // 模拟点击下载
          window.URL.revokeObjectURL(url);
        })
      }
      else {
        sendJumpPdfData({ taskId: this.taskId, jumpTableName: this.$options.name + "Jump" }).then(response => {
          if(response) {
            loading.close();
            this.$message({
              message: 'pdf文档输出成功！',
              type: 'success'
            });
          };
          const data = response;
          let url = window.URL.createObjectURL(data);   // 将二进制文件转化为可访问的url
          var a = document.createElement('a');
          document.body.appendChild(a);
          a.href = url;
          a.download = this.$options.title + '.pdf';
          a.click();   // 模拟点击下载
          window.URL.revokeObjectURL(url);
        })
      }
    },
  }
}
</script>

<style scoped>
div,h4,span,ul {
  list-style: none;
  box-sizing: border-box;
}
.el-row{
  margin: 10px 0;
  padding: 20px 20px;
  background-color: #f9f9f9;
  flex-wrap: wrap;
  flex-direction: row;
}

.barthel {
  margin-top: 10px;
}

.barthel div {
  float: left;
  height: 35px;
  line-height: 35px;
  border-radius: 5px;
}

.barthel .barthel-table {
  color: #fff;
  padding: 0 40px;
  font-size: 14px;
  background-color: #5493fa;
}

.barthel .barthel-score {
  margin-left: 50px;
}

.barthel-score div {
  width: 90px;
  padding-left: 10px;
  border: 1px solid #cfcccf;
}

.barthel-score span {
  margin-left: 10px;
}

.barthel .result {
  width: 500px;
  padding-left: 10px;
  margin-left: 100px;
  border: 1px solid #cecbce;
}

.barthel .score, .barthel .result {
  font-size: 14px;
  background-color: #eeebee;
}


.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten {
  margin-top: 25px;
}

.one .eat, .two .transfer, .three .decoration, .four .wc, .five .take-shower, .six .walk, .seven .stairs, .eight .clothes, .nine .shit, .ten .urine {
  border-radius: 5px;
  padding: 10px 15px;
  background-color: #f7f7fb;
}

.el-radio1, .el-radio2, .el-radio3, .el-radio4 {
  margin-top: 20px;
}
.el-radio1{
  margin-left: 5px;
}
.sum {
  height: 50px;
  line-height: 50px;
  margin-top: 25px;
  background-color: #f7f7fb;
}

.sum span:first-child {
  margin-left: 20px;
}

.sum span:last-child {
  color: #fff;
  padding: 8px 15px;
  border-radius: 5px;
  margin-left: 40px;
  background-color: #008b90;
}
.lastDiv {
  margin-top: 50px;
}
.lastDiv /deep/.el-input__inner{
  color: #fff;
  text-align: center;
  background-color: #008b90;
}
</style>
